<template>
  <div class="detail">
    <nav-bar>
      <span slot="text">订单详细</span>
    </nav-bar>
    <div class="container">
      <div class="order_info">
        <li>
          <span class="first">订单状态</span>
          <span class="black">{{
            orderDetail.status == 0 ? '未支付' : '已支付'
          }}</span>
        </li>
        <li>
          <span class="first">订单号</span>
          <span class="black">{{ orderDetail.order_num }}</span>
        </li>
        <li>
          <span class="first">下单时间</span>
          <span class="black">{{ orderDetail.created_at }}</span>
        </li>
      </div>
      <div class="user_info" v-if="orderDetail && orderDetail.user">
        <p>收货信息</p>
        <li>
          <span class="first">收货人</span>
          <span class="black">{{ orderDetail.user.user_name }}</span>
        </li>
        <li>
          <span class="first">电话号码</span>
          <span class="black">{{ orderDetail.user.phone }}</span>
        </li>
        <li>
          <span class="first">收货地址</span>
          <span class="black">
            {{ orderDetail.user.address }}
            {{ orderDetail.user.address_detail }}
          </span>
        </li>
      </div>
      <div class="food_info" v-if="orderDetail && orderDetail.food">
        <p>订单详细</p>
        <header>
          <!-- <img :src="imageUrl + orderDetail.shop_img" alt="" /> -->
          <!-- 测试图片 -->
          <img src="@/assets/images/37.jpg" alt="" />
          <p>{{ orderDetail.shop_name }}</p>
          <i class="iconfont icon-zuojiantou icon"></i>
        </header>
        <div class="food_list">
          <ul>
            <li v-for="(item, index) in orderDetail.food" :key="index">
              <!-- <img :src="imageUrl + item.food_img" alt="" /> -->
              <!-- 测试图片 -->
              <img src="@/assets/images/11.jpg" alt="" />
              <div class="content">
                <p style="font-size: 14px;">{{ item.food_name }}</p>
                <p>规格：{{ item.food_specs || '无' }}</p>
                <p>
                  <span class="left">x{{ item.food_num }}</span>
                  <span class="right">¥{{ item.food_price }}</span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <footer class="clearfix">
        <div class="clearfix">
          <p class="left" v-if="orderDetail.food">
            <span>共 {{ orderDetail.food.length }} 件商品</span>
            <span>(含运费{{ orderDetail.delivery_fee }}元)</span>
          </p>
          <p class="right">¥{{ orderDetail.price }}</p>
        </div>
        <div class="btns right">
          <button @click="deleteOrder(orderDetail.id)">删除订单</button>
          <button @click="again(orderDetail.shop_id)">再次购买</button>
          <button @click="goto">前往评价</button>
        </div>
      </footer>
    </div>
    <router-view />
  </div>
</template>

<script>
import { imageUrl } from '@/config/env';
import { getOrderDetail } from '@/network/getData';

export default {
  data() {
    return {
      imageUrl,
      order_id: null,
      orderDetail: {}
    };
  },
  created() {
    this.order_id = this.$route.query.orderId;
  },
  mounted() {
    this.initData();
  },
  methods: {
    async initData() {
      const res = await getOrderDetail(this.order_id);
      this.orderDetail = res.data;
    },
    deleteOrder(id) {
      console.log('删除');
    },
    again(id) {
      this.$router.push({
        path: '/shop',
        query: {
          shopId: id
        }
      });
    },
    goto() {
      this.$router.push({
        path: '/order/detail/comment',
        query: {
          shopId: this.orderDetail.shop_id,
          orderId: this.order_id
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.detail {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #fff;
}
.container {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  overflow: scroll;
  padding-top: 45px;
  .first {
    display: inline-block;
    width: 100px;
  }
  .black {
    color: #222;
  }
}
.order_info,
.user_info {
  font-size: var(--font-size);
  li {
    line-height: 35px;
    padding: 0 10px;
    border-bottom: 1px solid #ccc;
  }
  p {
    padding: 10px;
    background-color: #f2f2f2;
  }
}
.food_info {
  > p {
    padding: 10px;
    font-size: var(--font-size);
    background-color: #f2f2f2;
  }
  header {
    position: relative;
    display: flex;
    line-height: 30px;
    padding: 5px 10px;
    border-bottom: 1px solid #ccc;
    img {
      width: 30px;
      height: 30px;
      margin-right: 10px;
    }
    .icon {
      position: absolute;
      top: 15%;
      right: 10px;
    }
  }
  .food_list {
    padding: 0 10px;
    margin-top: 10px;
  }
  li {
    display: flex;
    margin-bottom: 8px;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
    .content {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      width: 100%;
      font-size: var(--font-min);
    }
  }
}
footer {
  margin-top: 15px;
  padding: 10px;
  border-top: 1px solid #ccc;
  .clearfix {
    font-size: var(--font-size);
    .right {
      color: red;
      font-size: 16px;
    }
  }
  .btns {
    margin-top: 15px;
    button {
      margin-left: 10px;
      padding: 2px 5px;
      font-size: var(--font-size);
      border: 1px solid #ccc;
      background-color: transparent;
    }
    :last-of-type {
      color: var(--color-base);
      border-color: var(--color-base);
    }
  }
}
</style>
